<template>
  <div>
    <div class="nav_title_box">
      <div class="nav_title">功能导航栏</div>
      <div :class="appType === '277' ? 'nav_btn':'nav_btn_cat'" v-show="close" @click="close = false">取消</div>
    </div>
    <div class="list_box">
      <ul class="list_item" @touchstart="showDeleteButton" @touchend="clearLoop">
        <li 
          class="item" 
          v-for="(item, index) in list" 
          :key="index"
          @click="itemClick(index)">
          <img :src="item.img" alt="">
          <span>{{item.text}}</span>
        </li>
        <li class="item" v-show="typeList.openserver" @click="$router.push('/start_server')">
          <img src="../../../assets/img/home/type/ic_main_open_server_sheet.png" alt="">
          <span>开服表</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(0)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" v-show="typeList.discount" @click="$router.push('/discount_game')">
          <img src="../../../assets/img/home/type/ic_func_discount.png" alt="">
          <span>折扣手游</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(1)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" v-show="typeList.bt" @click="$router.push('/bt_game')">
          <img src="../../../assets/img/home/type/ic_func_bt.png" alt="">
          <span>BT首页</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(2)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" v-show="typeList.web" @click="$router.push('/web_game')">
          <img src="../../../assets/img/home/type/ic_func_h5.png" alt="">
          <span>H5手游</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(3)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" v-show="typeList.active" @click="$router.push('/game_activitie')">
          <img src="../../../assets/img/home/type/ic_func_active.png" alt="">
          <span>游戏活动</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(4)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" v-show="typeList.vip" @click="$router.push('/vip_query')">
          <img src="../../../assets/img/home/type/ic_func_vip.png" alt="">
          <span>VIP查询</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(5)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" v-show="typeList.stopserver" @click="$router.push('/stop_server')">
          <img src="../../../assets/img/home/type/ic_func_stopserver_turngame.png" alt="">
          <span>停服转游</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(6)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" v-show="typeList.tool" @click="$router.push('/page_tools')">
          <img src="../../../assets/img/home/type/ic_func_auxiliary_tool.png" alt="">
          <span>辅助工具</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(7)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" v-show="typeList.charge && $store.state.isDc" @click="$router.push('/recharge_manage')">
          <img src="../../../assets/img/home/type/ic_charge.png" alt="">
          <span>代充管理</span>
          <div class="icon_close" v-show="close" @click.stop="closeClick(8)">
            <img src="../../../assets/img/home/type/ic_search_delete.png" alt="">
          </div>
        </li>
        <li class="item" @click="$router.push('/apply')">
          <img v-if="appType === '277'" src="../../../assets/img/home/icon_more.png" alt="">
          <img v-else src="../../../assets/img/home/icon_more_cat.png" alt="">
          <span>更多</span>
        </li>
        <!-- <li class="item" @click="$router.push('/recharge_manage')">
          <img src="../../../assets/img/home/icon_more.png" alt="">
          <span>测试</span>
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
import { appType } from '../../../assets/js/app'
import storage from '../../../common/storage'
  export default {
    data() {
      return {
        list: [
          {img: require('../../../assets/img/home/icon_all_game.png'),text: '全部游戏'},
          {img: require('../../../assets/img/home/icon_data.png'),text: '数据管理'},
          {img: require('../../../assets/img/home/icon_message.png'),text: '消息'},
        ],
        typeList: {},
        tgid: '',
        close: false,
        loop: null,
        appType: null,
      }
    },
    mounted() {
      this.appType = appType()
      this.tgid = this.$cookies.get('tgid')
      this.typeList = storage.get(this.tgid)
    }, 
    methods: {
      itemClick(index) {
        if(index === 0) {
          return this.$router.push('/all_game')
        }else if (index === 1) {
          return this.$router.push('/data_management')
        }else if (index === 2) {
          return this.$router.push('/message')
        }
      },
      showDeleteButton() {
        clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
        this.Loop = setTimeout(function() {
          this.close = true
        }.bind(this), 1000);
      },
      clearLoop() {
        clearTimeout(this.Loop);
      },
      closeClick(index) {
        switch (index) {
          case 0:
            this.typeList.openserver = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
          case 1:
            this.typeList.discount = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
          case 2:
            this.typeList.bt = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
          case 3:
            this.typeList.web = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
          case 4:
            this.typeList.active = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
          case 5:
            this.typeList.vip = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
          case 6:
            this.typeList.stopserver = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
          case 7:
            this.typeList.tool = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
          case 8:
            this.typeList.charge = false
            storage.set(this.tgid, this.typeList)
            this.$toast('已经从首页导航区移除')
            break
        }
      }
    },
  }
</script>

<style scoped>
.nav_title_box {
  height: 50px;
  padding: 44px 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav_title {
  font-size: 40px;
  font-weight: bold;
  color: #222222;
  line-height: 36px;
}

.nav_btn {
  color: #fff;
  font-size: 28px;
  line-height: 50px;
  background: #29209C;
  padding: 0 25px;
  border-radius: 10px;
}

.nav_btn_cat {
  color: #fff;
  font-size: 28px;
  line-height: 50px;
  background: linear-gradient(314deg,#ff5e39 10%, #ff8210 87%);
  padding: 0 25px;
  border-radius: 10px;
}

.list_box {
  padding: 0 35px 100px;
}

.list_item {
  width: 680px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.item {
  width: 170px;
  height: 170px;
  box-sizing: border-box;
  padding: 0 27px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  color: #333333;
  margin-bottom: 28px;
  position: relative;
}

.item img {
  width: 116px;
  height: 116px;
}

.icon_close {
  position: absolute;
  top: 0;
  right: 20px;
  width: 30px;
  height: 30px;
}

.icon_close img {
  display: block;
  width: 30px;
  height: 30px;
}
</style>